<template>
  <div class="dropdown-select">
    <van-dropdown-menu class="dropdown-select-menu">
      <template v-for="(item, index) in allConditions" :key="index">
        <!-- 位置 -->
        <van-dropdown-item  :ref="dropdownItemRefs" :title="item.label" v-if="item.gType === 2" class="van-dropdown-item">
          <div class="dropdown-bar-panel-content">
            <SidEbar :subGroups="item.subGroups"></SidEbar>
            <viewHouseBtns @clear="handleClearClick('位置')" @house="handleHouseClick('位置')"></viewHouseBtns>
          </div>
        </van-dropdown-item>

        <!-- 价格人数 -->
        <van-dropdown-item v-if="item.gType === 2" title='价格/人数' :ref="dropdownItemRefs">
          <div class="PricePeople">
            <PricePeople  title="人/床/居室数"></PricePeople>
          </div>

          <viewHouseBtns  @clear="handleClearClick('价格/人数')"  @house="handleHouseClick('价格/人数')"></viewHouseBtns>
        </van-dropdown-item>

        <!-- 排序 -->
        <div class="sort">
          <van-dropdown-item v-if="item.gType === 4" v-model="value" :options="sorts">
          </van-dropdown-item>
        </div>

        <!-- 筛选  -->
        <van-dropdown-item :title="item.label" v-if="item.gType === 1" :ref="dropdownItemRefs" >
          <div>
            <SidEbar :subGroups="item.subGroups"></SidEbar>
            <viewHouseBtns  @clear="handleClearClick('筛选')"  @house="handleHouseClick('筛选')"> </viewHouseBtns>
          </div>
        </van-dropdown-item>
      </template>
 
    </van-dropdown-menu>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import SidEbar from '@/components/side-bar/side-bar.vue'
  import viewHouseBtns from '@/components/view-house-btns/view-house-btns.vue'
  import PricePeople from '@/components/PricePeople/PricePeople.vue'
  const props = defineProps({
    allConditions: {
      type: Array,
      default: () => []
    }
  })
  const value = ref(0)

  const dropdownRefs = {};

  const dropdownItemRefs = (el) => {
  if (el) {
    dropdownRefs[el.title] = el;
  }

};

  const handleClearClick = (title) => {
  dropdownRefs[title]?.toggle();
};
  const handleHouseClick= (title) => {
  dropdownRefs[title]?.toggle();
};

// console.log(dropdownRefs);


  const sorts = [
    { text: '欢迎度排序', value: 0 },
    { text: '好评优先', value: 1 },
    { text: '点评数多→少', value: 3 },
    { text: '低价优先', value: 4 },
    { text: '高价优先', value: 5 }
  ]

</script>

<style lang="less" scoped>
  :global(.dropdown-select .van-ellipsis) {
    overflow: visible;
  }

  .van-dropdown-item {
    height: 1000px;
  }
  .PricePeople {
    height: 440px;
  }
</style>
